<template>
    <div class="containe-home">
        <!-- 头部选择通道 -->
        <div class="header">
            <div class="select-channal">
                <!-- 循环 -->
                <span
                    v-for="(item, index) in channalOpt"
                    :class="{ active: channalIndex == index }"
                    @click="selectChannal(index)"
                    :key="index"
                    >{{ item }}</span
                >
            </div>
            <div class="channal-item">
                <!-- 选择入口是渲染入口通道，选择出口时渲染出口通道 -->
                <span
                    v-for="(item, index) in currentChannel"
                    :class="{ active: entryIndex == index }"
                    :key="index"
                    @click="entryIndex = index"
                >
                    {{ item.name }}
                </span>
            </div>
        </div>
        <!-- 主要内容 -->
        <div class="content">
            <div class="content-left">
                <!-- 左侧内容 -->
                <!-- 入离场图片 -->
                <div class="park-img">
                    <div class="park-img-box">
                        <div class="title">入场图片</div>
                        <img src="../assets/img/login_bg.png" class="img" />
                    </div>
                    <div class="park-img-box">
                        <div class="title">离场图片</div>
                        <img src="../assets/img/login_bg.png" class="img" />
                    </div>
                </div>
                <!-- 停车记录 -->
                <div class="park-record">
                    <el-tabs v-model="parkRecordIndex" @tab-click="selectParkRecord">
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-edit tabar-icon"></i>模糊匹配</span>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-document tabar-icon"></i>停车记录</span>
                            <!-- 停车记录列表 -->
                            <el-table ref="parkTable" :data="parkRecord" style="width: 100%" border>
                                <el-table-column label="入场时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.userName }}</template>
                                </el-table-column>
                                <el-table-column label="离场时间" align="center">
                                    <template slot-scope="scope">{{ scope.row.sex }}</template>
                                </el-table-column>
                                <el-table-column label="停车时长" align="center">
                                    <template slot-scope="scope">{{ scope.row.age }}</template>
                                </el-table-column>
                                <el-table-column label="实收金额（元）" align="center">
                                    <template slot-scope="scope">{{ scope.row.nation }}</template>
                                </el-table-column>
                                <el-table-column label="车辆类型" align="center">
                                    <template slot-scope="scope">{{ scope.row.education }}</template>
                                </el-table-column>
                                <el-table-column label="操作" align="center" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button type="text">入场图片</el-button>
                                        <el-button type="text">离场图片</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="content-right">
                <!-- 右侧内容 -->
                <div class="park-detail">
                    <div class="carlincense-info">
                        <div class="carlincense">京P2YT86</div>
                    </div>
                    <div class="pay-detail">
                        <div>入场时间：2023-05-17 02:11:12</div>
                        <div>离场时间：2023-05-17 02:11:12</div>
                        <div>停车时长：2小时23分24秒</div>
                        <div>优惠金额：¥224.8</div>
                        <div>已付金额：¥224.8</div>
                        <div>欠费金额：¥224.8</div>
                        <div>车辆类型：分时月租/100元</div>
                        <div>收费原因：周一 00：00-06:00</div>
                    </div>
                    <div class="final-pay">
                        <div class="order-pay-price">应付金额：<span>¥224.8</span></div>
                        <div class="final-pay-price">待支付：<span class="symble">¥</span><span class="money">224.8</span></div>
                    </div>
                </div>
                <!-- 操作按钮 -->
                <div class="park-handle">
                    <el-button type="primary">扫码收费</el-button>
                    <el-button type="primary">现金收费</el-button>
                    <el-button type="primary">免费放行</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home', // 首页
    data() {
        return {
            channalOpt: ['入口', '出口'],
            channalIndex: 0,
            entryIndex: 0,
            channalEntryList: [
                {
                    name: '一号通道入口',
                    id: '1'
                },
                {
                    name: '二号通道入口',
                    id: '2'
                },
                {
                    name: '三号通道入口',
                    id: '3'
                },
                {
                    name: '四号通道入口',
                    id: '4'
                }
            ],
            channalExitList: [
                {
                    name: '一号通道出口',
                    id: '1'
                },
                {
                    name: '二号通道出口',
                    id: '2'
                }
            ],
            currentChannel: [],
            parkRecordIndex: 0,
            parkRecord: [] //停车记录列表
        };
    },
    components: {},
    created() {
        this.currentChannel = this.channalEntryList;
    },
    methods: {
        selectChannal(index) {
            //设置通道
            this.channalIndex = index;
            this.entryIndex = 0; //重置通道选项；
            this.currentChannel = index == 0 ? this.channalEntryList : this.channalExitList;
        },
        selectParkRecord(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>

<style scoped>
.containe-home {
    padding: 52px 0;
}
.header {
    width: 100%;
    height: 44px;
    background: #e4ecff;
    padding: 7px 32px 0;
    box-sizing: border-box;
    display: flex;
}
.select-channal {
    width: 140px;
    height: 30px;
    margin-right: 111px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #2d4fa2;
    color: #2d4fa2;
    font-size: 14px;
}
.select-channal span {
    width: 70px;
    text-align: center;
    cursor: pointer;
}
.select-channal span.active {
    color: #fff;
    background: #2d4fa2;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    border-radius: 18px;
}
.channal-item {
    display: flex;
    align-items: center;
}
.channal-item span {
    margin-right: 51px;
    color: #2d4fa2;
    cursor: pointer;
    height: 37px;
    line-height: 34px;
}
.channal-item span.active {
    background: url(../assets/img/channal-bg.png) no-repeat center 28px;
    background-size: 102px 8px;
}
/* 主要内容的UI */
.content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 22px;
    margin-top: 16px;
}
.content-left {
    width: 68%;
}
.content-right {
    width: 31%;
}
/* 入离场图片 */
.park-img {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.park-img-box {
    height: 292px;
    width: 49.5%;
    background: #fff;
    border-radius: 12px;
}
.park-img-box .title {
    font-size: 16px;
    line-height: 23px;
    color: #242a37;
    padding: 9px 0 8px 20px;
}
.park-img-box .img {
    height: 252px;
    width: 100%;
    border-radius: 12px;
}
/* 停车记录 */
.park-record {
    margin-top: 10px;
    background: #fff;
    border-radius: 4px;
    min-height: 30px;
    padding: 15px 21px;
}
.tabar-icon {
    margin-right: 5px;
}
/* 右侧停车详情和操作记录 */
.park-detail {
    padding: 20px 18px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 16px;
}
/* 车牌部分 */
.carlincense-info{
  margin-bottom: 14px;
}
.carlincense-info .carlincense {
    width: 161px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #2f7df1;
    border-radius: 5px;
    border: 1px solid #ffffff;
    font-size: 26px;
color: #FFFFFF;
}
/* 费用部分 */
.pay-detail {
    font-size: 18px;
    color: #666a74;
    line-height: 30px;
}
.pay-detail > div {
    margin-bottom: 10px;
}
.final-pay {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}
.order-pay-price {
    font-size: 14px;
    color: #a4a8b0;
    line-height: 19px;
    margin-right: 12px;
}
.order-pay-price span {
    text-decoration: line-through;
}
.final-pay-price {
    font-size: 14px;
    color: #666a74;
    line-height: 19px;
}
.final-pay-price .symble {
    font-size: 24px;
    color: #f24a45;
}
.final-pay-price .money {
    font-size: 40px;
    color: #f24a45;
}
/* 操作按钮 */
.park-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.park-handle .el-button {
    width: 33%;
}
</style>
